<template>
  <div class="">
    <!-- 参照 https://www.miyoushe.com/ys/home/26 -->
    <!-- header 左侧有且仅有帖子类型的列表，右侧为发布帖子的按钮 -->
    <header class="community-header">
      <!-- 左侧为帖子类型的列表 -->
      <div class="article-types">
        <nav>
          <ul>
            <li
              class="article-types-menu"
              v-for="(menu, index) in menus"
              :key="index"
              :class="[
                $route.path.startsWith(menu.path)
                  ? 'community-header__navitem--active'
                  : '',
              ]"
            >
              <router-link :to="menu.path">{{ menu.name }}</router-link>
            </li>
          </ul>
        </nav>
      </div>
      <!-- 右侧发帖按钮 -->
      <div class="post-article">
        <router-link to="/community/post-upload">
          <el-button type="success" :icon="EditPen">发布帖子</el-button>
        </router-link>
      </div>
    </header>
    <div class="community-main">
      <!-- 公告板 -->
      <div class="community-announcement">
        <div
          v-for="(announcement, index) in announcements"
          :key="index"
          class="mb-4 announcement-items"
        >
          <span class="zd-tag">置顶</span>
          <span class="announcement-title">{{ announcement.title }}</span>
        </div>
      </div>
      <!-- 三栏帖子 -->
       <!-- 三栏帖子布局 -->
    <div class="posts-container">
      <div 
        v-for="(post, index) in posts" 
        :key="post.id" 
        class="post-card"
        :style="{ 'animation-delay': `${index * 0.05}s` }"
      >
        <!-- 用户信息 -->
        <div class="user-info">
          <el-avatar :size="36" :src="post.user.avatar" />
          <div class="user-details">
            <div class="username">{{ post.user.name }}</div>
            <div class="post-time">{{ post.createTime }}</div>
          </div>
        </div>

        <!-- 标题 -->
        <h3 class="post-title">{{ post.title }}</h3>

        <!-- 概述 -->
        <p class="post-summary">{{ post.summary }}</p>

        <!-- 封面图 -->
        <div v-if="post.cover" class="post-cover">
          <el-image 
            :src="post.cover" 
            fit="cover" 
            style="width: 100%; height: 160px; border-radius: 4px;"
            :preview-src-list="[post.cover]"
            :initial-index="0"
            hide-on-click-modal
          >
            <template #error>
              <div class="img-error">图片加载失败</div>
            </template>
        </el-image>
        </div>

        <!-- 互动数据 -->
        <div class="post-stats">
          <div class="stat-item">
            <el-icon><View /></el-icon>
            <span>{{ formatNumber(post.views) }}</span>
          </div>
          <div class="stat-item">
            <el-icon><ChatDotRound /></el-icon>
            <span>{{ formatNumber(post.comments) }}</span>
          </div>
          <div class="stat-item" :class="{ liked: post.isLiked }" @click="toggleLike(post)">
            <el-icon><Star /></el-icon>
            <span>{{ formatNumber(post.likes) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100, 300]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="prev, pager, next"
        :total="totalPosts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useHead } from "nuxt/app";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { EditPen, View, Star, ChatDotRound } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const route = useRoute();

// 菜单
const menus = [
  { name: "全部", icon: "el-icon-document", path: "/community/type/all" },
  { name: "问答", icon: "el-icon-question", path: "/community/type/qa" },
  { name: "攻略", icon: "el-icon-star-off", path: "/community/type/strategy" },
  {
    name: "讨论",
    icon: "el-icon-chat-dot-square",
    path: "/community/type/discussion",
  },
  {
    name: "公告",
    icon: "el-icon-notebook-2",
    path: "/community/type/announcement",
  },
];

useHead({
  title: "社区 - 水晶战争游戏平台",
});

// 帖子
const posts = ref([
  {
    "id": 1,
    "title": "《艾尔登法环》DLC黄金树之影新手入门指南",
    "summary": "刚刚通关了DLC，分享一些新手需要注意的要点和前期强力装备获取方法，帮助大家少走弯路...",
    "cover": "https://images.unsplash.com/photo-1635863138275-d9b33299680a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "user": {
      "name": "褪色者老司机",
      "avatar": "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
      "level": 15
    },
    "createTime": 1719123456789,
    "views": 12450,
    "comments": 342,
    "likes": 865,
    "isLiked": false,
    "tags": ["艾尔登法环", "攻略"]
  },
  {
    "id": 2,
    "title": "《英雄联盟》新英雄Hwei的连招技巧分享",
    "summary": "练习了三天新英雄，发现一套非常实用的连招组合，在中路对线期很容易打出优势...",
    "cover": "https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "user": {
      "name": "中路法王",
      "avatar": "https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
      "level": 23
    },
    "createTime": 1719037056789,
    "views": 8923,
    "comments": 215,
    "likes": 523,
    "isLiked": true,
    "tags": ["英雄联盟", "技巧"]
  },
  {
    "id": 3,
    "title": "《原神》4.7版本新角色强度分析",
    "summary": "抽到了新五星角色，经过几天测试，给大家分享一下使用心得和配队建议...",
    "cover": null,
    "user": {
      "name": "提瓦特探索者",
      "avatar": "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
      "level": 35
    },
    "createTime": 1718950656789,
    "views": 15678,
    "comments": 487,
    "likes": 1024,
    "isLiked": false,
    "tags": ["原神", "角色分析"]
  },
  {
    "id": 4,
    "title": "《绝地求生》新地图武器点位全解析",
    "summary": "花了20小时探索新地图，标记了所有高级武器刷新点，吃鸡率提升50%...",
    "cover": "https://images.unsplash.com/photo-1542751110-97427bbecf20?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "user": {
      "name": "吃鸡专业户",
      "avatar": "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
      "level": 18
    },
    "createTime": 1718864256789,
    "views": 7654,
    "comments": 189,
    "likes": 432,
    "isLiked": false,
    "tags": ["绝地求生", "地图攻略"]
  },
  {
    "id": 5,
    "title": "《塞尔达传说：王国之泪》全神庙位置攻略",
    "summary": "终于收集齐了所有152个神庙，分享每个神庙的位置和解谜要点...",
    "cover": "https://images.unsplash.com/photo-1614294149710-32eec425a251?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "user": {
      "name": "海拉鲁导游",
      "avatar": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
      "level": 29
    },
    "createTime": 1718777856789,
    "views": 21345,
    "comments": 654,
    "likes": 1567,
    "isLiked": true,
    "tags": ["塞尔达传说", "攻略"]
  },
  {
    "id": 6,
    "title": "《Apex英雄》第20赛季武器强度排行",
    "summary": "新赛季武器平衡性调整很大，根据实战数据给出当前版本武器强度评级...",
    "cover": "https://images.unsplash.com/photo-1551103782-8ab07afd45c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "user": {
      "name": "APEX数据分析师",
      "avatar": "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
      "level": 26
    },
    "createTime": 1718691456789,
    "views": 9876,
    "comments": 276,
    "likes": 654,
    "isLiked": false,
    "tags": ["Apex英雄", "数据分析"]
  },
  {
    "id": 7,
    "title": "《暗黑破坏神4》第一赛季最强BD推荐",
    "summary": "赛季已经进行一周，测试了各种BD，这套死灵法师构建刷图效率最高...",
    "cover": "https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "user": {
      "name": "暗黑老玩家",
      "avatar": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
      "level": 31
    },
    "createTime": 1718605056789,
    "views": 11234,
    "comments": 398,
    "likes": 876,
    "isLiked": true,
    "tags": ["暗黑破坏神", "BD推荐"]
  },
  {
    "id": 8,
    "title": "《CS2》最新更新后AWP使用技巧",
    "summary": "更新后AWP的开镜速度和移动速度有了调整，分享一些适应新版本的心得...",
    "cover": "https://images.unsplash.com/photo-1552820728-8b83bb6b773f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "user": {
      "name": "狙击大师",
      "avatar": "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
      "level": 19
    },
    "createTime": 1718518656789,
    "views": 6543,
    "comments": 187,
    "likes": 421,
    "isLiked": false,
    "tags": ["CS2", "武器技巧"]
  },
  {
    "id": 9,
    "title": "《最终幻想14》6.4版本零式副本攻略",
    "summary": "开荒三天终于通关，分享各阶段机制处理方法和职业搭配建议...",
    "cover": "https://images.unsplash.com/photo-1534423861386-85a16f5d13fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "user": {
      "name": "光之战士",
      "avatar": "https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
      "level": 42
    },
    "createTime": 1718432256789,
    "views": 8765,
    "comments": 234,
    "likes": 567,
    "isLiked": false,
    "tags": ["最终幻想14", "副本攻略"]
  },
  {
    "id": 10,
    "title": "《守望先锋2》新坦克英雄实战评测",
    "summary": "购买了高级通行证提前试玩新英雄，分享技能使用技巧和阵容搭配...",
    "cover": "https://images.unsplash.com/photo-1542751371-653c5fe6df3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "user": {
      "name": "守望先锋老玩家",
      "avatar": "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
      "level": 27
    },
    "createTime": 1718345856789,
    "views": 7654,
    "comments": 198,
    "likes": 432,
    "isLiked": true,
    "tags": ["守望先锋2", "英雄评测"]
  },
  {
    "id": 11,
    "title": "《星露谷物语》1.6版本新内容探索",
    "summary": "更新了大型补丁，添加了多个新事件和物品，分享一些新发现的内容...",
    "cover": null,
    "user": {
      "name": "休闲农场主",
      "avatar": "https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
      "level": 33
    },
    "createTime": 1718259456789,
    "views": 5432,
    "comments": 165,
    "likes": 389,
    "isLiked": false,
    "tags": ["星露谷物语", "游戏更新"]
  },
  {
    "id": 12,
    "title": "《使命召唤：现代战争3》多人模式地图分析",
    "summary": "测试了所有新地图，分析各地图的最佳路线和战术点位，帮助大家提高胜率...",
    "cover": "https://images.unsplash.com/photo-1614294149710-695e0329d6ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "user": {
      "name": "COD专业玩家",
      "avatar": "https://images.unsplash.com/photo-1508341591423-4347099e1f19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80",
      "level": 21
    },
    "createTime": 1718173056789,
    "views": 9876,
    "comments": 287,
    "likes": 654,
    "isLiked": false,
    "tags": ["使命召唤", "地图分析"]
  }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(50)
const totalPosts = ref(0)
const allPosts = ref([])

const announcements = [
  {
    title:
      "欢迎来到水晶战争云游戏社区！请遵守社区规则，尊重他人，共同营造一个积极友好的交流环境。",
  },
  { title: "社区新功能上线，快来体验吧！" },
  { title: "注意：请勿发布广告或垃圾信息，违者将被封禁账号。" },
];

// 分页事件处理
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
  currentPage.value = 1
}

const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

// 点赞功能
const toggleLike = (post: any) => {
  post.isLiked = !post.isLiked
  post.likes += post.isLiked ? 1 : -1
  // ElMessage.success(post.isLiked ? '已点赞' : '已取消点赞')
}

// 数字格式化方法
function formatNumber(value: number) {
  if (value >= 10000) {
    return (value / 10000).toFixed(1) + '万'
  }
  return value
}
</script>

<style scoped>
.community-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #f5f5f5;
  border-bottom: 0px solid #ddd;
  height: 60px;
}
.article-types {
  flex: 1;
}
.article-types ul {
  list-style: none;
  display: flex;
}
.article-types-menu a {
  text-decoration: none;
  color: #333;
  padding: 15px 20px;
  display: inline-block;
  font-size: 16px;
  background-color: #f5f5f5;
}
.article-types-menu a:hover {
  background-color: #e0e0e0;
  border-radius: 0px;
}
.community-header__navitem--active a {
  background-color: #e0e0e0;
  color: #000;
  border-radius: 0px;
}
.post-article {
  /* 右侧发帖按钮 */
  margin-left: auto;
}
.community-main {
  padding: 30px;
}
.community-announcement {
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-radius: 4px;
}
.zd-tag {
  display: inline-block;
  border: 1px solid #0095ff;
  color: #0095ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 10px;
}
.announcement-title {
  font-weight: bold;
  color: #333;
}
.announcement-items {
  display: flex;
  align-items: center;
  margin: 5px;
}
.posts-container {
  /* display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  grid-template-rows: masonry;
  margin-bottom: 24px; */
  column-count: 3;
  column-gap: 16px;
}

.post-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  animation: fadeInUp 0.5s ease both;
  display: inline-block;
  width: 100%;
  margin-bottom: 16px;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-details {
  margin-left: 12px;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.post-time {
  font-size: 12px;
  color: #999;
}

.post-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
  line-height: 1.4;
  color: #333;
  display: -webkit-box;
  /* -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; */
}

.post-summary {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px 0;
  line-height: 1.5;
  display: -webkit-box;
  /* -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden; */
}

.post-cover {
  margin-bottom: 12px;
}

.post-stats {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #999;
  cursor: pointer;
  transition: color 0.2s;
}

.stat-item:hover {
  color: #409EFF;
}

.stat-item.liked {
  color: #F56C6C;
}

.stat-item .el-icon {
  margin-right: 4px;
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .posts-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .posts-container {
    grid-template-columns: 1fr;
  }
  
  .filter-section {
    flex-direction: column;
    gap: 16px;
  }
  
  .filter-right {
    width: 100%;
    justify-content: space-between;
  }
}
.img-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 160px;
  background-color: #f0f0f0;
  color: #999;
  font-size: 14px;
}
</style>